<template>
    <div class="box">
        <div class="fixedbox">
            <div class="head_top">
                <div class="top_list" :class='id==m.id?"seclted":""' v-for='(m,idx) in ArrList' @click='changeTitle(m.id)'>{{m.item}}</div>
            </div>
        </div>
        <div style="overflow:scroll;" class='list_box'>
            <mt-loadmore bottomPullText='加载更多'  :bottom-method="loadBottom"  :bottom-all-loaded="allLoaded" ref="loadmore" >
                <div class="notice" v-show='Notice !== ""'>{{Notice}}</div>
                <div v-for='(item,idx) in list'>
                    <div class="order" >
                        <div class='order_id'>拿货单：{{item.Code}}</div>
                        <div class='order_status'>{{item.Statu}}</div>
                    </div>
                    <div class="pic_box" @click='OrderDetail(item.ID)'>
                        <img v-for='(item1,idx1) in item.imglist' :src='item1' class="img_list">
                        <div class="title_img" v-if='item.imglist.length == 1'>{{item.Title}}</div>
                        <div class="title_more" v-if='item.imglist.length > 1'>查看全部></div>
                    </div>
                    <div class="total_comment" v-if='item.Summary'>{{item.Summary}}</div>
                    <div class="return_money" v-if='item.RefundSummary'>{{item.RefundSummary}}</div>
                    <div class="btn_box">
                        <button @click='btnTitle(item2.action,item.ID)' class="btn" :class='item2.isPoint?"":"btn_cancle"' v-for='(item2,idx2) in item.Buttons'>{{item2.title}}</button>
                    </div>  
                </div>
            </mt-loadmore>
        </div>
    </div>
</template>

<script>
    const imgutil = require('../../common/until.js')
    import { Loadmore, Indicator, MessageBox, Toast } from 'mint-ui'
    export default {
        name: 'orderList',
        data () {
            return {
                ArrList: [{ item: '全部', id: 0 }, { item: '待支付', id: 1 }, { item: '待发货', id: 2 }, { item: '待收货', id: 3 }, { item: '已完成', id: 4 }, { item: '取消/关闭', id: 5 }],
                id:0,
                allLoaded: false,
                pageIndex: 1,
                pageSize: 20,
                list:[],
                Notice: ''
            }
        },
        created: function () {
            this.id = this.$route.query.id
            this.init(1)
        },
        methods: {
            init: function(t){
                const that = this
                let dataObj = {StatuID: that.id,pageIndex: that.pageIndex,pageSize: that.pageSize}
                Indicator.open()
                that.$http('/pinhuoBuyer/GetOrderListV5',dataObj,function(res){
                    Indicator.close()
                    if(res.Result){
                        that.Notice = res.Data.Notice
                        res.Data.OrderList.map(item => {
                            item.imglist = [];
                            item.Images.map(img => {
                                item.imglist.push(imgutil.getUrl(img, 300));
                            })
                        })
                        if (res.Data.OrderList.length == 20){
                            that.pageIndex++;
                            that.allLoaded = false;
                        }else{
                            that.allLoaded = true;
                        }
                        that.list = that.list.concat(res.Data.OrderList)
                        if(t == 2){
                            that.$refs.loadmore.onBottomLoaded()
                        }
                    }
                },'GET')

            },
            changeTitle: function(id){
                this.id = id
                this.pageIndex = 1
                this.list = []
                this.allLoaded = false
                this.init(1)
            },
            loadBottom: function(){
                if(this.allLoaded){
                    return false
                }
                this.init(2)
            },
            btnTitle: function(title,id){
                const that = this
                if(title == '一键加入购物车'){
                    Indicator.open()
                    that.$http('/pinhuocart/AddItemFromOrder',{id:id},function(res){
                        Indicator.close()
                        if(res.Result){
                            MessageBox({
                                title:'提示',
                                message: '此笔订单的商品已经全部添加到拿货车了。您可以在拿货车对商品编辑后重新下单',
                                showCancelButton: true,
                                confirmButtonText:'拿货车'
                            }).then( action => {
                                if(action == 'confirm'){
                                    that.$router.push({ path: '/index/car'})
                                }
                            })
                        }
                    },'POST')
                }else if(title == '买家取消'){
                    MessageBox({
                        title:'提示',
                        message: '是否确认取消订单',
                        showCancelButton: true,
                    }).then( action => {
                        if(action == 'confirm'){
                            Indicator.open()
                            that.$http('/pinhuoBuyer/orderv2/Cancel',{id:id},function(res){
                                Indicator.close()
                                if(res.Result){
                                    Toast('成功取消订单')
                                    that.pageIndex = 1
                                    that.list = []
                                    that.init(1)
                                }else{
                                    Toast(res.Message)
                                }
                            },'POST')
                        }
                    })
                }else if(title == '买家确认收货'){
                    MessageBox({
                        title:'提示',
                        message: '确认已收齐发货的商品了，确认后状态将变成“已完结”',
                        showCancelButton: true,
                        confirmButtonText:'确认签收'
                    }).then( action => {
                        if(action == 'confirm'){
                            Indicator.open()
                            that.$http('/pinhuoBuyer/orderv2/ComfirmReceipt',{id:id},function(res){
                                Indicator.close()
                                if(res.Result){
                                    Toast(res.Message)
                                    that.pageIndex = 1
                                    that.list = []
                                    that.init(1)
                                }else{
                                    Toast(res.Message)
                                }
                            },'POST')
                        }
                    })
                }
            },
            OrderDetail: function(id){
                if(id == this.id){
                    return
                }
                this.$router.push({ path: '/orderdetail',query:{id:id}})
            }
        },
        components:{
            Loadmore
        }
    }
</script>
<style scoped>
    .box{height: 100vh;background-color: #f5f5f5;}
    .fixedbox{width: 100%;height: 42px;position: relative;}
    .head_top{position: fixed;width: 100%;max-width: 720px;background-color: #fff;height: 42px;line-height: 42px;overflow-x: scroll;top: 0;display: flex;}
    .top_list{flex: 1;height: 40px;line-height: 40px;text-align: center;font-size: 12px;position: relative;border-bottom:2px solid #fff;color: #000;}
    .seclted{border-bottom:2px solid #d52831;color:#d52831;}
    .list_box{width: 100%;max-width: 720px;background-color: #f5f5f5;overflow-y: scroll;}
    .notice{width: 100%;height: 24px;line-height: 24px;font-size: 14px;padding: 5px 0;text-align: center;color: red;background-color: #fcedee;}
    .order{width: 100%;height: 20px;line-height: 20px;padding: 5px 0;overflow:hidden;font-size: 14px;background-color: #fff;margin-top: 10px;}
    .order_id {float: left;height: 20px;line-height: 20px;margin-left: 10px;}
    .order_status{float: right;height: 20px;line-height: 20px;margin-right: 10px;color: #d52831;}
    .pic_box{width: 100%;padding: 10px 0;overflow: hidden;}
    .img_list{float: left;height: 91px;width: 20%;margin-left: 5%;}
    .title_img{height: 91px;width: 71%;float: right;line-height: 91px;margin-right: 2%;overflow: hidden;}
    .title_more{height: 91px;float: right;margin-right: 4%;line-height: 91px;}
    .total_comment{width: 92%;padding: 5px 4%;color: #000;font-size: 14px;height: 20px;line-height: 20px;text-align: right;background-color: #fff;}
    .return_money{width: 92%;padding: 2px 4%;color: #aaa;font-size: 12px;height: 16px;line-height: 16px;text-align: right;background-color: #fff;}
    .btn_box{width: 92%;padding: 10px 4%;font-size: 16px;text-align: right;background-color: #fff;}
    .btn{background-color: #E64340;color: #fff;border: none;border-radius: 5px;padding: 5px 15px;margin-left: 15px;outline: transparent;}
    .btn_cancle{background-color: #F8F8F8;color: #000;border: 1px solid #ddd;}
</style>
